<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>课程</title>
    <link rel="stylesheet" href="./css/curriculum.css">
</head>

<body>
<!-- header -->
<nav id="navbar">
    <div class="header">
        <div class="nav-wrapper">
            <div class="nav-container">
                <div class="nav-l">
                    <!-- logo -->
                    <div class="logo">
                        <img src="./images/logo.png" class="logo" alt="Logo">
                    </div>
                    <!-- list -->
                    <nav class="nav">
                        <div class="divider"></div>
                        <a href="#">首页</a>
                        <a href="#" class="curriculum">课程</a>
                        <a href="#">资源</a>
                        <a href="#">展示</a>
                        <a href="#" class="our">OUR</a>
                    </nav>
                </div>
                <div class="nav-r">
                    <!-- git -->
                    <a href="https://gitee.com/chen-jieyan-jy/group-assignments.git" target="_blank" class="git">
                        <button>Gitee ·</button>
                    </a>
                    <!-- mine -->
                    <div class="mine" id="mine">
                        <img src="./images/avatar.jpg" alt="">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 遮罩层 -->
    <div class="overlay" id="overlay"></div>
    <!--侧边栏-->
    <div id="side-content" class="side-content">
        <!--头像-->
        <div class="avatar-content">
            <img class="avatar-image" src="images/avatar.jpg">
            <div class="avatar-nickName-content">
                <div class="avatar-nickName">倒霉熊</div>
                <div class="avatar-number">编号：000001</div>
            </div>
        </div>
        <!--我的课程-->
        <div class="my-course-content">
            <div class="my-course-title">我的课程</div>
            <div class="my-course-en">MY COURSE</div>
        </div>
        <!--中间容器-->
        <div class="middle-content">
            <div class="content-currency" style="padding-top: 4%;">
                <div class="content-currency-font">账号管理</div>
                <div>
                    <svg t="1718820997424" class="icon" viewBox="0 0 1024 1024" version="1.1"
                         xmlns="http://www.w3.org/2000/svg" p-id="2620" width="200" height="200">
                        <path d="M613.504 512L274.752 173.248l90.496-90.496L794.496 512l-429.248 429.248-90.496-90.496z"
                              fill="#666666" p-id="2621"></path>
                    </svg>
                </div>
            </div>
            <div class="content-currency">
                <div class="content-currency-font">个人资料</div>
                <div>
                    <svg t="1718820997424" class="icon" viewBox="0 0 1024 1024" version="1.1"
                         xmlns="http://www.w3.org/2000/svg" p-id="2620" width="200" height="200">
                        <path d="M613.504 512L274.752 173.248l90.496-90.496L794.496 512l-429.248 429.248-90.496-90.496z"
                              fill="#666666" p-id="2621"></path>
                    </svg>
                </div>
            </div>
            <div class="content-currency" style="border: 0;padding-bottom: 4%">
                <div class="content-currency-font">通用设置</div>
                <div>
                    <svg t="1718820997424" class="icon" viewBox="0 0 1024 1024" version="1.1"
                         xmlns="http://www.w3.org/2000/svg" p-id="2620" width="200" height="200">
                        <path d="M613.504 512L274.752 173.248l90.496-90.496L794.496 512l-429.248 429.248-90.496-90.496z"
                              fill="#666666" p-id="2621"></path>
                    </svg>
                </div>
            </div>
        </div>
        <!--底部间容器-->
        <div class="bottom-content">
            <div class="content-currency" style="padding-top: 2.5%;">
                <div class="content-currency-font">隐私政策</div>
                <div>
                    <svg t="1718820997424" class="icon" viewBox="0 0 1024 1024" version="1.1"
                         xmlns="http://www.w3.org/2000/svg" p-id="2620" width="200" height="200">
                        <path d="M613.504 512L274.752 173.248l90.496-90.496L794.496 512l-429.248 429.248-90.496-90.496z"
                              fill="#666666" p-id="2621"></path>
                    </svg>
                </div>
            </div>
            <div class="content-currency" style="border: 0; padding-bottom: 3%;">
                <div class="content-currency-font">帮助中心</div>
                <div>
                    <svg t="1718820997424" class="icon" viewBox="0 0 1024 1024" version="1.1"
                         xmlns="http://www.w3.org/2000/svg" p-id="2620" width="200" height="200">
                        <path d="M613.504 512L274.752 173.248l90.496-90.496L794.496 512l-429.248 429.248-90.496-90.496z"
                              fill="#666666" p-id="2621"></path>
                    </svg>
                </div>
            </div>
        </div>
        <!--退出登录-->
        <div class="login-out-content">
            退出登录
        </div>
    </div>
</nav>
<div class="page-content">
    <!--main-->
    <div class="main-content">
        <!--left-->
        <div class="main-content-left">
            <div class="main-content-title">
                设计构成基础
            </div>
            <div class="main-content-border"></div>
            <div class="main-content-Secondtitle">
                课程人数：120人
            </div>
            <div class="main-content-bottom">
                <div class="main-content-teacher">倒霉熊</div>
                <div class="main-content-Thirdtitle">
                    切换课程<img src="./images/切换.png" alt="">
                </div>
            </div>
        </div>
        <div class="main-content-border-right"></div>
        <!--right-->
        <div class="main-content-right">
            <div class="main-content-Secondtitle">完成进度</div>
            <div class="main-content-schedule">
                <div class="main-content-right-tiele">
                    <div class="main-content-Fourthtitle"><img src="./images/square.png" alt="">已学：14</div>
                    <div class="main-content-Fourthtitle"><img src="./images/square.png" alt="">在学：3</div>
                    <div class="main-content-Fourthtitle"><img src="./images/square.png" alt="">待学：20</div>
                </div>
                <div class="main-content-schedule-container">
                    <div class="box" style="--i:40%; --clr:#1a255b;">
                        <div class="circle">
                            <h2>40%</h2>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--tabs-->
    <div class="tabs-content">
        <div class="tab-common tab-active" data-tab="0">
            <img src="./images/简介_white.png" alt="">
            <div class="tab-common-text">简&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;介</div>
        </div>
        <div class="tab-common" data-tab="1">
            <img src="./images/任务_blue.png" alt="">
            <div class="tab-common-text">任&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;务</div>
        </div>
        <div class="tab-common" data-tab="2">
            <img src="./images/问答_blue.png" alt="">
            <div class="tab-common-text">问&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;答</div>
        </div>
        <div class="tab-common" data-tab="3">
            <img src="./images/进度_blue.png" alt="">
            <div class="tab-common-text">进&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;度</div>
        </div>
    </div>
    <div class="bottom-content-no-active bottom-content-active" data-content="0">
        <div class="bottom-content-bottom">
            <div class="bottom-content-title">课程目标</div>
            <div class="bottom-content-font">
                本课程是产品设计专业基础课，兼具基础性和应用性，其任务在于帮助学生掌握形态造型最佳比及提升色感，提高学生形象思维能力、抽象思维能力、设计创造能力，为产品设计学习打下坚实基础。
            </div>
        </div>
    </div>
    <div class="bottom-content-no-active" data-content="1">
        <div class="bottom-title">
            <div class="left-blue"></div>
            <div class="right-title">构成概述</div>
        </div>
        <div class="bottom-content-bottom-task">
            <div class="expand-content">
                <div class="round-dot-content">
                    <div class="round-dot"></div>
                    <div class="bottom-content-title">构成的概念和历史发展</div>
                </div>
                <svg t="1719671005057" class="icon" viewBox="0 0 1024 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg" p-id="3492" width="256" height="256">
                    <path d="M467.28077 504.642759L18.425091 923.301762c-24.566787 23.031363-24.566787 60.393352 0 83.424716s64.487817 23.031363 89.054604 0l404.328377-377.202549 404.328377 377.202549c24.566787 23.031363 64.487817 23.031363 89.054604 0 24.566787-23.031363 24.566787-60.393352 0-83.424716l-448.855679-418.659003c-24.566787-23.031363-64.487817-23.031363-89.054604 0z m448.855679 14.330626c24.566787 23.031363 64.487817 23.031363 89.054604 0 24.566787-23.031363 24.566787-60.393352 0-83.424716L556.335374 17.401474c-24.566787-23.031363-64.487817-23.031363-89.054604 0L18.425091 435.548669c-24.566787 23.031363-24.566787 60.393352 0 83.424716s64.487817 23.031363 89.054604 0l404.328377-377.202549 404.328377 377.202549z"
                          p-id="3493" fill="#252525"></path>
                </svg>
            </div>
            <div class="bottom-not-active">
                <div class="bottom-content-font">
                    1、构成主义思潮起源于20世纪10-20年代的苏联，发起人为先锋艺术家及建筑师塔特林(BлaAMMMpTaTЛMH)。构成主义企图反叛现代艺术的自律性，提倡艺术的实用价值和社会功能，极大影响了德国包豪斯和荷兰风格派运动，并广泛影响了20世纪建筑、平面设计、工业设计、戏剧、电影、摄形、音乐等诸多艺术门类。
                </div>
                <div class="submit-content">
                    <div class="bottom-content-font">
                        2、收集构成五百字以上的历史发展并提交。
                    </div>
                    <div class="submit-button"><a href="curriculum.html">提交</a></div>
                </div>
                <textarea placeholder="请输入文字" class="bottom-content-input"></textarea>
            </div>
        </div>
    </div>
    <div class="bottom-content-no-active" data-content="2">
        <img src="./images/undevelop.png" class="bottom-content-bottom-img" alt="">
    </div>
    <div class="bottom-content-no-active" data-content="3">
        <img src="./images/undevelop.png" class="bottom-content-bottom-img" alt="">
    </div>
</div>
<script src="js/index.js"></script>

</body>

</html>